<template>
  <div>
    <el-container>
      <!--  边栏  -->
      <el-aside style="width: 200px; min-height: 300px">
        <side-menu></side-menu>
      </el-aside>
      <!--  主页    -->
      <el-main>
       <div class="content">
         <el-collapse
           v-model="activeIndex"
         >
           <el-collapse-item v-for="(item,i) in contentList" :key="i" :index="item.name"  :id="item.id" :name="item.name">
             <template  slot="title" style="display: inline-block">
               <div class="title">{{item.title}}</div>
               <div class="subtitle">{{item.subtitle}}</div>
             </template>
             <component :is="item.component"></component>
           </el-collapse-item>
         </el-collapse>
       </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>


import SideMenu from "./SideMenu";
import AboutUs from "./AboutUs";
import NewPaper from "./NewPaper";
import MyNote from "./MyNote";
import MyComment from "./MyComment";
export default {
  name: "Index",
  components:{NewPaper, SideMenu,AboutUs,MyNote,MyComment},
  data(){
    return{
      activeIndex:['1','2','3','4'],
      contentList:[
        {title:'关于我们',subtitle:'about us',component:'AboutUs',id:'about-us',name:'1'},
        {title:'新的论文',subtitle: 'new paper',component: 'NewPaper',id:'new-paper',name:'2'},
        {title:'我的笔记本',subtitle: 'my note',component: 'MyNote',id:'my-note',name:'3'},
        {title:'我收到的评论',subtitle: 'my comment',component: 'MyComment',id:'my-comment',name:'4'}
      ]
    }
  }
}
</script>

<style scoped>
  .title{
    font-size: 30px;
    font-weight: 700;
  }
  .subtitle{
    font-size: 20px;
    color:#888888;
    margin-left: 15px;
    margin-bottom: -15px;
  }
</style>
